<template>
  <div class="lg:gap-6 flex flex-col gap-3" v-if="!!cards.length">
    <div class="flex justify-between items-center">
      <h2 class="font-bold lg:text-[20px] text-[#09090B] text-[1rem] capitalize">
        {{ $t('pages.directCharge') }}
      </h2>
      <nuxt-link
        v-if="show"
        :prefetch="false"
        :to="localePath('/top-up')"
        class="py-2 px-4 bg-[#f7f7f7] rounded-full border flex justify-center items-center cursor-pointer"
      >
        <span class="font-bold text-[12px] text-[#121212] capitalize"> {{ $t('pages.viewAll') }}</span>
      </nuxt-link>
    </div>
    <div class="lg:gap-6 max-lg:overflow-x-auto max-lg:flex-nowrap max-lg:flex grid grid-cols-5 gap-3">
      <nuxt-link
        :prefetch="false"
        :to="localePath(`/product/${i.code}`)"
        v-for="(i, k) in cards"
        class="flex gap-2 border group hover:shadow-md overflow-hidden duration-400 transition-all relative rounded-[16px] cursor-pointer max-lg:w-1/2 max-md:w-3/4 max-lg:flex-none"
        :key="k"
        :style="'background-image: url(' + $globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_3_4') + ')'"
      >
        <div class="absolute inset-0 w-full backdrop-blur-[2.5rem] h-full rounded-[1rem] z-20 [background: rgba(255,255,255,0.5)]"></div>
        <div class="size-full absolute inset-0 z-30">
          <img src="https://cd.sealmg.com/assets/img/touming.png" class="size-full object-cover" alt="https://cd.sealmg.com/assets/img/touming.png" />
        </div>
        <div class="bg-black/20 flex gap-2 p-[.75rem] size-full">
          <div class="h-[56px] aspect-square rounded-[8px] flex-none overflow-hidden z-40">
            <img
              :src="$globalFn.imgPrefixUrl(i.image || '', 'goods_thumb_1_1')"
              :alt="i?.goods_name || ''"
              :title="i?.goods_name || ''"
              class="group-hover:scale-110 size-full object-cover transition-all duration-300"
            />
          </div>
          <div class="flex z-40 flex-col justify-around bg-transparent">
            <h3 class="font-medium text-[12px] text-white line-clamp-1">
              {{ i?.goods_name || '' }}
            </h3>
            <div class="font-medium text-[12px] text-white/50 line-clamp-2">
              {{ i?.region?.name || '' }}
            </div>
          </div>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'DirectCharge',
    props: {
      cards: {
        type: Array,
        default: () => []
      },
      show: {
        type: Boolean,
        default: true
      }
    }
  }
</script>
